<!-- 收货方扫描签收的图片确认列表 -->
<template>
  <div class="gridContainer">
    <div class="m-det-warp mb30">
      <div class="m-det-tit">业务单号：{{data.BbMain.BBillNo}}</div>
      <div class="m-det-list">
        <ul class="m-det-ul">
          <li class="displayflex">
            <span class="label">制单时间</span>
            <div class="flex1 value">{{data.BbMain.InputDate | time}}</div>
          </li>
          <li class="displayflex">
            <span class="label">司机</span>
            <div class="flex1 value">{{data.Vehicle.Driver1Name}}</div>
          </li>
          <li class="displayflex">
            <span class="label">司机电话</span>
            <div class="flex1 value">{{data.Vehicle.Driver1Tel}}</div>
          </li>
        </ul>
        <!-- <div class="txt-wrap">
          <textarea v-model="Memo" placeholder="备注"></textarea>
        </div>  -->
      </div>
    </div>

    <uploader :title="'回执单上传'" :img-list="imgList" :max="9"></uploader>

    <div class="m-form-wrap">
        <div class="m-form-box">
          <span class="txt">签收人</span>
          <div class="m-form-ipt"><input type="text" v-model="signName"></div>
        </div>

        <popup-picker class="m-form-box" title="差异原因" :data="reasonList" v-model="reason" @on-change="onChange" placeholder="请选择"></popup-picker>
      
        <div class="m-form-box"> 
            <span class="txt">备注</span>
            <div class="m-form-ipt">
                <textarea type="text" placeholder="请输入备注信息" v-model="Memo" ></textarea>
            </div>
        </div>
    </div>
    <div class="w100fix"></div>
    <div class="checknum-bot displayflex">
      <div class="num">共<em class="red">{{totalNum}}</em>件商品</div>
      <div class="flex1">
        <ul class="cf cn-btn-grp f-r">
          <li class="btn-checknum f-l cancel" @click="backLink()">取消</li>
          <li class="btn-checknum f-l" @click="Confirm()">收货完成</li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
import uploader from '@/components/share/imageUploader/imageUploader.vue';

export default {
  components: {
      uploader,
  },
  data() {
    return {
      reasonList: [
        ['请选择']
      ],
      data: {
        Vehicle:{},
        BbMain:{},
      },
      goodslist: [],

      imgList: [],

      guid: "",
      Memo: "",
      ReceiverID: "",
      ReceiverName: "",
      PRContactsTel: "",

      totalNum: 0,
      checkedName: "",
      reason: [],
      curHos: "",
      Carrierlist: [],
      showHos: false,
      signName:'',
    };
  },
  computed: {
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null; 
    }
  },
  created() {
    this.getData();
  },
  beforeDestroy() {
    sessionStorage.removeItem('goodslist');
    sessionStorage.removeItem('orderlist');
  },
  methods: {
    onChange(value){
      this.reason = value;
    },

    getData() {
      if(!sessionStorage.goodslist || !sessionStorage.orderlist){
          let self = this;
          this.$vux.toast.show({
            text: '数据已过期<br>请重试',
            type: 'cancel',
            onHide () {
              self.$router.go(-1)
            }
          });
      } else {
        this.ReceiverID = this.userinfo.StaffID;
        this.ReceiverName = this.userinfo.Name;
        this.PRContactsTel = this.userinfo.MobileNo;
        this.signName = this.userinfo.Name;

        this.goodslist = JSON.parse(sessionStorage.goodslist);
        this.data = JSON.parse(sessionStorage.orderlist);

        this.goodslist.forEach(x => {
          this.totalNum += x.RecPKGS;
        });
        this.getRefusalreasonData();
      }
    },

    Confirm() {
      let imgList = [];
        this.imgList.forEach((x) => {
        let item = x.split(',')[1];
        imgList.push(item);
      })

      var query = {
        Guid: this.data.Vehicle.Guid,
        imgurl: imgList,
        PKGS: this.data.BbMain.Pkgs,
        Weight: this.data.BbMain.Weight,
        Volumn: this.data.BbMain.Volume,
        RowNo: this.data.VehicleDetail[0].RowNo,
        Memo: this.Memo,
        Receiver: this.ReceiverID,
        ReceiverName: this.signName,
        PRContactsTel: this.PRContactsTel,
        goodslist: this.goodslist,
        ExpReason: this.reason[0]
      };
      if(query.ExpReason == '请选择') {
        query.ExpReason = '';
      };

      this.Ajax.post("CarrierReceiving", query).then((res) => {
        if (res.IsSuccess) {
          let self = this;
          this.$vux.toast.show({
            text: '代签收成功',
            type: 'success',
            onHide () {
              self.$router.push({
                path: "receivelist"
              });
            }
          });
        } else {
          this.Toast({
            message: res.ErrorMessage || "出错了，请刷新重试",
          });
        }
      }).catch(e => {
        console.log(e);
          this.Toast({
            message: '出错了，请刷新重试',
          });
      });
    },

    getRefusalreasonData: function() {
      let query = {
        TypeValue: "Refusalreason"
      };
      this.Ajax.post("GetDatadictionaries", query).then((res) => {
        if(res.IsSuccess) {
          if (res.Datas.length > 0) {
            res.Datas.forEach(x => {
              this.reasonList[0].push(x.DataIntroduction);
            });
          }
        } else {
          this.Toast('出现错误，请刷新重试');
        }
      }).catch(e => {
        console.log(e);
        this.Toast('出现错误，请刷新重试');
      });
    },

    selectNames: function(vol, index) {
      var self = this;
      if (index == "01") {
        self.moneshow = true;
      }
      self.checkedName = vol;
    },
    backLink(){
      this.$router.push({
        path:'receivelist'
      })
    }
  },
};
</script>